<template>
  <div>
    <el-dialog
      title="数据导入"
      width="45%"
      :visible="dialogImportData"
      @close="handleClose"
    >
      <el-form label-width="100px">
        <el-form-item
          label="标题"
        >
          <el-upload
            ref="upload"
            class="upload-demo"
            action="#"
            :on-change="uploadFile"
            :file-list="fileList"
            :auto-upload="false"
            :before-remove="beforeRemove"
            accept=".xlsx, .xls"
            :limit="1"
            multiple
          >
            <el-button slot="trigger" size="mini" type="primary" class="button">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">
              支持扩展名：xls、xlsx，文件不得大于1M
            </div>
          </el-upload>
        </el-form-item></el-form>
      <el-row slot="footer" type="flex" justify="center" align="middle" class="dialog-footer">
        <el-button type="warning" plain @click="handleClose">取消</el-button>
        <el-button v-loading="loading" type="primary" @click="submit">确认</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { importSkuData } from '@/api/sku'
export default {
  props: {
    dialogImportData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      fileList: [
      ],
      fileName: ''
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:dialogImportData', false)
    },

    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    uploadFile(file) {
      console.log(file)
      this.fileName = file.name
      // this.fileList = [...file]
    },
    async submit() {
      const data = await importSkuData({
        fileName: this.fileName
      })
      console.log(data)
      // this.httpRequest()
      this.handleClose()
    }
    // async httpRequest() {
    //   const fd = new FormData()
    //   fd.append('fileName', this.fileList[0].raw)
    //   try {
    //     await importSkuData(fd)
    //   } catch (error) {
    //     console.log(error)

    // }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__title {
    font-size: 16px !important;
    color: #333 !important;
    font-weight: 700;
}
.el-form{
        padding: 0px 50px !important;
}
.el-button--primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
     margin-left: 50px !important;

  }
  .el-button--warning.is-plain {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
      font-size: 14px;

  }

    .button {
   background: #6783f7 !important;
   display: inline-block;
   height: 36px;
   width: 221px !important;
   margin-left: 10px !important;
   }

  .el-upload__tip {
       color: #bbc0cc;
    font-size: 14px;
    margin-top: 7px;
  }
</style>
